<template>
  <div class="dashboard">
    <el-card class="box-card box-card-container">
      <div slot="header" class="clearfix">
        <h1>大学生兼职平台管理系统</h1>
        <a href="http://localhost:80" target="_blank"
          ><el-button type="primary" round class="jumpBtn">去前台</el-button></a
        >
      </div>
      <div class="chart-fa">
        <!-- 职位分类情况统计 -->
        <el-card class="box-card">
          <div id="myChartPie" class="chart"></div>
        </el-card>
        <!-- 近7日作品数据 (评论, 收藏, 阅读) -->
        <el-card class="box-card">
          <div id="myChartStacked" class="chart"></div>
        </el-card>
        <!-- 每月发文数量统计 -->
        <el-card class="box-card">
          <div id="myChartBar" class="chart"></div>
        </el-card>
        <el-card class="box-card">
          <span class="title">职位访问量统计</span>
          <div class="chart">
            <!-- <evaluateTable></evaluateTable> -->
            <visitCount
              id="chartContainer1"
              :visitArr="visitArr"
              :xName="xName"
            ></visitCount>
          </div>
        </el-card>
      </div>
    </el-card>
  </div>
</template>

<script>
import newTable from "@/components/new.vue";
import visitCount from "@/components/visitCount.vue";
import evaluateTable from "@/components/evaluateTable.vue";

export default {
  name: "Dashboard",
  components: { evaluateTable, newTable, visitCount },
  mounted() {},
  mounted() {
    // 发送请求, 获取登录用户的信息
    this.$http.get("/login/getinfo").then((res) => {
      // console.log('login-res', res)
      const { code, result } = res;
      if (code == 0) {
        this.loginUsername = result.nickname;
      }
    });
    // 发送请求, 获取不同分类对应的职位数
    this.$http
      .get("/articles?type=category_stat")
      .then((res) => {
        const { code, result } = res;
        if (code == 0) {
          result.forEach((item) => {
            this.dataPie.push({
              name: item.category,
              value: item.count,
            });
          });
          this.drawPie();
        }
      })
      .catch((res) => {
        // console.log('res', res)
      });
    // 查询每个月份对应的职位记录数
    this.$http.get("/articles?type=month_stat").then((res) => {
      const { code, result } = res;
      if (code == 0) {
        this.dataBar[0] = [];
        this.dataBar[1] = [];
        result.forEach((item) => {
          this.dataBar[0].push(item.year + "-" + item.month);
          this.dataBar[1].push(item.count);
        });
        this.drawBar();
      }
    });
    // 查询近7天每天的评论数
    this.drawStakedLine();
    this.$http.get("/comments/stat").then((res) => {
      const { code, result } = res;
      if (code == 0) {
        let data = result.reverse();
        data.forEach((item) => {
          this.dataStakedLine.x.push(item.week.substr(0, 3));
          this.dataStakedLine.y.push(item.num);
        });

        this.drawStakedLine();
      }
    });

    this.getArticles();
  },
  data() {
    return {
      // 用户信息
      loginUsername: "",
      // 饼图数据源
      dataPie: [],
      // 柱状图数据源
      dataBar: [[], []],
      // 线性图数据与
      dataStakedLine: { x: [], y: [] },
      xName: [],
      visitArr: [],
    };
  },
  methods: {
    // 绘制饼图
    drawPie() {
      // 基于准备好的dom，初始化echarts实例
      let myChartPie = this.$echarts.init(
        document.getElementById("myChartPie")
      );

      let pieColors = [
        "#9FE6B8",
        "#FFDB5C",
        "#ff9f7f",
        "#fb7293",
        "#E062AE",
        "#E690D1",
        "#37A2DA",
        "#32C5E9",
        "#67E0E3",
        "#e7bcf3",
        "#9d96f5",
        "#8378EA",
        "#96BFFF",
      ];
      let richColor = {};
      pieColors.forEach((item, idx) => {
        richColor[`color${idx}`] = {
          fontSize: 18,
          color: item,
        };
      });

      let chartData = this.dataPie;

      let option = {
        title: {
          text: "职位分类情况统计",
          // x: 'center',
          y: "top",
        },
        tooltip: {}, //鼠标hover, 显示详情
        color: pieColors,
        itemStyle: {
          borderRadius: 8,
        },
        series: [
          {
            name: "职位分类",
            type: "pie",
            radius: ["40%", "75%"],
            avoidLabelOverlap: false,
            label: {
              formatter: (params) => {
                // console.log(params)
                return `{color${params.dataIndex}|${params.name}(${params.value})}`;
              },
              rich: richColor,
            },
            labelLine: {
              lineStyle: {
                width: 3,
              },
            },
            data: chartData,
          },
          {
            name: "职位总数",
            type: "pie",
            radius: ["0%", "0%"],
            itemStyle: {
              // 防止鼠标悬浮到标签时出现放大的点
              color: "transparent",
            },
            label: {
              position: "inside",
              formatter: `{data|{c}}\n{serie|{a}}`,
              rich: {
                data: {
                  fontWeight: "bold",
                  fontSize: 35,
                  color: `#555`,
                  lineHeight: 38,
                  textBorderColor: `transparent`,
                  textBorderWidth: 0,
                },
                serie: {
                  fontSize: 18,
                  color: `#acbac6`,
                  lineHeight: 28,
                  textBorderColor: `transparent`,
                  textBorderWidth: 0,
                },
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              // 计算表格数据value总和
              chartData.reduce((prev, cur) => prev + cur.value, 0),
            ],
          },
        ],
      };

      // 绘制图表
      myChartPie.setOption(option);
    },
    // 绘制柱状图
    drawBar() {
      // 基于准备好的dom，初始化echarts实例
      let myChartBar = this.$echarts.init(
        document.getElementById("myChartBar")
      );
      // 绘制图表
      myChartBar.setOption(this.lineOption);

      window.onresize = function resize() {
        myChartBar.resize();
      };
    },
    // 绘制折线图
    drawStakedLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChartStackedLine = this.$echarts.init(
        document.getElementById("myChartStacked")
      );
      // 绘制图表
      myChartStackedLine.setOption(this.stakedLineOption);

      window.onresize = function resize() {
        myChartStackedLine.resize();
      };
    },
    getArticles() {
      this.$http.get(`/articles`).then((res) => {
        res.result.map((item) => {
          this.xName.push(item.title);
          this.visitArr.push(item.visit_count);
        });
      });
    },
  },
  computed: {
    // 饼图配置对象
    // pieOptions() {
    //   return {
    //     title: {
    //       text: '职位分类情况统计',
    //       x: 'center',
    //       y: 'top',
    //     },
    //     series: [
    //       {
    //         name: '职位分类',
    //         type: 'pie',
    //         radius: '55%',
    //         data: this.dataPie,
    //         // data: [
    //         //   { value: 235, name: '视频广告' },
    //         //   { value: 274, name: '联盟广告' },
    //         // ],
    //       },
    //     ],
    //     label: {
    //       formatter: function (data) {
    //         return `${data.name} ${data.value}
    //         (${data.percent.toFixed(1)}%)`
    //       },
    //     },
    //     legend: {
    //       // Try 'horizontal'
    //       orient: 'vertical',
    //       right: 10,
    //       bottom: 10,
    //     },
    //     itemStyle: {
    //       normal: {
    //         shadowBlur: 200,
    //         shadowColor: 'rgba(0, 0, 0, 0.5)',
    //       },
    //     },
    //     textStyle: {
    //       color: '#666',
    //     },
    //     roseType: 'angle',
    //   }
    // },
    // 柱状图配置对象
    barOptions() {
      return {
        title: {
          text: "每月发表职位数量统计",
          x: "left",
          y: "top",
        },
        tooltip: {},
        xAxis: {
          data: this.dataBar[0],
          // data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
        },
        yAxis: {},
        series: [
          {
            name: "发表职位数量",
            type: "bar",
            data: this.dataBar[1],
            // data: [5, 20, 36, 10, 10, 20],
          },
        ],
        textStyle: {
          color: "#666",
        },
      };
    },
    // 折线图配置对象
    lineOption() {
      return {
        title: {
          text: "每月发表职位数量统计",
          x: "left",
          y: "top",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          data: this.dataBar[0],
          // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "发表职位数量",
            data: this.dataBar[1],
            // data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
            smooth: true,
          },
        ],
      };
    },
    // 多折线
    stakedLineOption() {
      return {
        title: {
          text: "近7日作品数据",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["评论", "浏览", "收藏"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          //data: this.dataStakedLine.x,
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "评论",
            type: "line",
            stack: "Total",
            data: [120, 132, 101, 134, 90, 230, 0],
            // data: this.dataStakedLine.y,
            smooth: true,
          },
          {
            name: "浏览",
            type: "line",
            data: [2, 3, 3, 3, 7, 6, 3],
            smooth: true,
          },
          {
            name: "收藏",
            type: "line",
            data: [4, 5, 2, 1, 1, 1, 1],
            smooth: true,
          },
        ],
      };
    },
  },
};
</script>

<style lang="stylus" scoped>
/* .dashboard, */
.box-card-container {
  height: calc(100vh - 150px);
  position: relative;

  .clearfix {
    display: flex;
    justify-content: center;
  }

  .jumpBtn {
    position: absolute;
    top: 26px;
    left: 1450px;
  }
}

.dashboard h1 {
  font-size: 55px;
  font-weight: 400;
  font-family: '隶书';
  color: #555;
}

.title {
  font-size: 20px;
  font-weight: 700;
  color: #555;
}

.chart-fa {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  // margin-top: 5px
  height: 100%;
  width: 100%;

  .chart {
    /* width: 650px;
    height: 450px; */
    display: flex;
    align-items: end;
    margin-top: 10px;
    width: calc(35vw);
    height: calc(28vh);
  }
}
</style>
